<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="ant-alert ant-alert-info">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" id="selectForm">
          <a-row>
            <a-col :span="6">
              <a-form-item label="产线">
                <a-input v-model="model.line" size="large" :disabled="true"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="工站">
                <a-input v-model="model.stn" size="large" :disabled="true"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-page-search-wrapper" style="margin-top: 10px">
      </div>
      <div style="margin-top: 10px;">
        <a-row type="flex">
          <a-col :flex="1" class="height-50">
            <div>
              <h1 STYLE="font-size: xx-large">工单信息</h1>
              <h2>工 单 号:&nbsp;
                <a-input v-model:value="wo.id" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">产品料号:
                <a-input v-model:value="wo.pn" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">检验员工:
                <a-input v-model:value="userName" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">工单数量:
                <a-input v-model:value="wo.qty" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">当前数量:
                <a-input v-model:value="wo.in" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">班 次 名 :&nbsp;
                <a-input v-model:value="stn.shift" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <h2 style="margin-top: 20px">合格品数:
                <a-input v-model:value="stn.ok" style="width: auto;font-size: x-large" :disabled="true" />
              </h2>
              <!--                <p class="height-100" style="text-align: center;font-size:xx-large;line-height: 155px">OK</p>-->
              <!--                <p class="height-100" style="text-align: center;font-size:xx-large;line-height: 155px">NOK</p>-->
            </div>
          </a-col>
          <a-col :flex="4">
            <div class="height-50">
              <value-trend :spcData=spcData></value-trend>
            </div>
          </a-col>
        </a-row>
      </div>
      <div>
      </div>
      <div style="width: 100%;height: 400px">
        <a-table
          size="small"
          style="width: 100%;height: 400px"
          :columns="fixedColumns"
          :rowClassName="tableRowClass"
          :data-source="logs"
          :showHeader="false"
          :pagination="false"
          :scroll="{ x: 500, y: 400 }"
          bordered
        >
        </a-table>
      </div>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import Vue from 'vue'
import { mapActions, mapGetters, mapState } from 'vuex'
import Singlebad from './modules/single_value.vue' //单值控制图组件
import ValueTrend from '@/components/spc/ValueTrend.vue'
import { httpAction, postAction } from '@api/manage'
import { USER_INFO } from '@/store/mutation-types'

export default {
  name: 'MesProdDetection2',
  mixins: [mixinDevice],
  components: {
    ValueTrend
  },
  data() {
    return {
      activeKey: 1,
      spcData: {},
      reCode: '',
      sing: [],
      isSPC: true,
      QisSpcParameterVO: {},
      dWidth: '100%',
      fixedColumns: [
        {
          width: '10%',
          align: 'left',
          dataIndex: 'time'
        },
        {
          width: '90%',
          align: 'left',
          dataIndex: 'msg'
        }
      ],
      logs: [],
      woOptions: [],
      stnOptions: [],
      userName: '',
      wo: {
        id: '',
        pn: '',
        name: '',
        qty: '',
        in: '',
        out: '',
        scrap: '',
        onhold: ''
      },
      stn: {
        name: '',
        op: '',
        wo: '',
        opr: '',
        ok: '',
        nok: '',
        wip: '',
        shift: ''
      },
      product: {
        barCode: '',
        result: '',
        resistance: '',
        temperature: ''
      },
      model: {
        line: '',
        dataid: '',
        op: '',
        stn: ''
      },
      model2: {},
      url: {
        list: '/qis/mesUnitStatus/list',
        getChartInfo: '/qis/spc/getManualChartInfo'
      },
      runCmd: '/monitor/api/runCmd',
      lineStatus: {
        serviceid: '',
        cmd: '',
        entityid: '',
        clientid: '',
        wo: '1',
        stn: '1'
      },
      load: {
        serviceid: '',
        cmd: '',
        entityid: '',
        clientid: '',
        wo: '1',
        stn: '1'
      },
      isResult: false,
      kanban: null,
      visible: false,
      value: this.$route.query.value
    }
  },
  created() {
    //监听
    // window.addEventListener('keypress', this.handkeyCode, true)
    let list = this.$route.query.value.split('-')
    this.model.line = list[0]
    this.model.op = list[1]
    this.model.stn = list[2]
    this.lineChange()
  },
  watch: {
    //监听路由地址的改变
    '$route.query.value': {
      handler: function(val) {
        let list = val.split('-')
        this.model.line = list[0]
        this.model.op = list[1]
        this.model.stn = list[2]
      },
      deep: true // 深度检测
    }
  }, mounted() {
    this.currentTime()
  },
  computed: {},
  methods: {
    afterClose() {
      this.reCode = ''
    },
    handleOk() {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'rsnprint',
        entityid: that.reCode,
        clientid: that.model.line + ';' + that.model.op + ';' + that.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        console.log('返回结果')
        console.log(res)
        if (res.success) {
          this.isResult = this.product.result.toUpperCase()
          this.reCode = ''
        } else {
          this.isResult = this.product.result.toUpperCase()
          //that.$message.warning(res.message);
        }
      }).finally(() => {
        setTimeout(() => {
          this.lineChange()
        }, 2000)
        that.confirmLoading = false
      })
    },
    showModal() {
      this.visible = true
    },
    getQueryParam(paramName) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(paramName)
    },
    getSpc() {
      const that = this
      console.log('进入SPC')
      if (that.QisSpcParameterVO.woId && that.isSPC) {
        postAction(this.url.getChartInfo, this.QisSpcParameterVO).then((res) => {
          that.isSPC = false
          if (res.code === 200) {
            this.spcData = res.result
          } else {
            that.$message.warning(res.message)
          }
        }).finally(() => {
          that.isSPC = true
        })
      }
    },
    currentTime() {
      //定时任务，10s刷新
      this.kanban = setInterval(() => {
        this.lineChange(this.model.line)
      }, 30000)
      //监听离开页面，定时任务销毁
      window.addEventListener('popstate', function(e) {
        clearInterval(kanban)
      }, false)
    },
    goSpcHome() {
      this.$router.push({ path: '/modules/screen/SPC_Report' }).catch(() => {
      })
    },
    handkeyCode(e) {
      if (e.keyCode === 32) {
        this.detection()
      }
    },
    searchReset() {
      this.model = {
        line: '',
        dataid: '',
        stn: ''
      }
    },
    tableRowClass(record, index) {
      return 'log-' + record.level
    },
    senseResistor() {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'getresistance',
        entityid: '',
        clientid: that.model.line + ';' + that.model.op + ';' + that.model.stn,
        wo: '',
        stn: this.model.stn
      }
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          this.product = res.result
          this.isResult = this.product.returnMesssage.split(';')[1]
          this.product.resistance = this.product.returnMesssage.split(';')[0]
          this.product.temperature = this.product.returnMesssage.split(';')[2]
        } else {
          this.isResult = this.product.returnMesssage.split(';')[1]
          this.product.resistance = this.product.returnMesssage.split(';')[0]
          this.product.temperature = this.product.returnMesssage.split(';')[2]
          //that.$message.warning(res.message);
        }
      }).finally(() => {
        this.lineChange()
        that.confirmLoading = false
      })
    },
    detection() {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'load',
        entityid: that.model2.barcode,
        clientid: that.model.line + ';' + that.model.op + ';' + that.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          this.product = res.result
          this.model2.barcode = this.product.barCode
          this.product.resistance = this.product.returnMesssage.split(';')[2]
          this.product.temperature = this.product.returnMesssage.split(';')[3]
          this.isResult = this.product.returnMesssage.split(';')[1]
        } else {
          this.isResult = this.product.returnMesssage.split(';')[1]
          //that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false
      })
      setTimeout(() => {
        this.lineChange()
      }, 2000)
    },
    // stnChange(stn){
    //   this.stnOptions.forEach(item=>{
    //     if (item.name === stn){
    //       this.model.op=item.op
    //       this.model.stn=item.name
    //     }
    //   })
    //   //this.lineChange(this.model.line);
    // },
    lineChange() {
      const that = this
      this.stnStatus = {
        serviceid: 'mes',
        cmd: 'stnstatus',
        entityid: that.model.line,
        clientid: that.model.line + ';' + that.model.op + ';' + that.model.stn,
        log: 20,
        stn: 0
        // shift: '0',
      }
      httpAction(this.runCmd, this.stnStatus, 'post').then((res) => {
        if (res.success) {
          let wo = JSON.parse(res.result.data.wo)
          let log = JSON.parse(res.result.data.log)
          let stn = JSON.parse(res.result.data.stn)
          this.userName = Vue.ls.get(USER_INFO).realname
          this.woOptions = wo
          this.QisSpcParameterVO.woId = stn.wo
          this.QisSpcParameterVO.line = this.model.line
          this.woOptions.forEach(item => {
            if (item.id === stn.wo) {
              this.wo = item
            }
          })
          this.stn = stn
          this.logs = log
        } else {
        }
      }).finally(() => {
        this.getSpc()
        that.confirmLoading = false
      })
    },
    handleInput(val) {
      this.woOptions.forEach(item => {
        if (item.id === val) {
          this.wo = item
        }
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
/**{*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/
/deep/ .ant-form label {
  font-size: 20px !important;
}

.ant-form label {
  font-size: 20px;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: 30px;
  background: rgb(131, 194, 240);
}

.box {
  margin-left: 30px;
}

.btn {
  width: 100px;
  height: 80px;

  margin-left: 300px;
}

.kong {
  display: inline-block;
  width: 200px;
  height: 40px;
  background: rgb(196, 196, 196);
}

.si {
  width: 200px;
  height: 40px;
  background: rgb(196, 196, 196);
}

.box2 {
  display: flex;
  flex-direction: row;
  position: relative;
}

.b3 {

  margin-top: 20px;
  margin-left: 20px;
}

.b4 {
  margin-top: 20px;
  margin-left: 20px;
}

.b5 {
  margin-top: 20px;
  margin-left: 20px;
}

.xx {
  margin-top: 10px;
}

.zi {
  font-size: 30px;
}

#ww {
  margin-left: 30px;
}

table {
  user-select: text;
  margin-bottom: 0;
}

/deep/ .ant-table-tbody .log-1 {
  background: #f39c12;
  color: #fff;
}

/deep/ .ant-table-tbody .log-2 {
  background: #f56954;
  color: #fff;
}

/deep/ .ant-table-tbody .log-3 {
  background: #00a65a;
  color: #fff;
}


</style>
